<template>
	<view class="page">
		<view class="meet-list">

			<view class="meet-item item-box">
				<image class="avatar item-img" :src="info.avatar" mode=""></image>
				<view class="item-info">
					<view class="meet-title">{{info.nickName}}({{info.varieties}})</view>
					<view class="dog theme" style="margin-top: 10upx;">病历号：{{info.recordNo}}</view>
				</view>
			</view>
		</view>

		<view class="content-20" v-if="info.medicalRecordList.length > 0">
			<!-- <view class="section-titles title">病历内容:</view>
		<view class="section-con">病历内容:</view> -->
			<block  v-for="(item, index) in info.medicalRecordList" :key='item.id'>
				<view class="section-titles title">检查报告<text class="small">(点击查看大图)</text>:</view>
				<view class="desc" style="margin-top: 20upx;">检查时间: {{item.recordTime | formatTime}}</view>
				<view class="section-con" v-for='(img, subIndex) in item.imgList' :key='item.imgUrl'>
					<image class="img" @click="previewImg(subIndex, item.imgList)" :src="img.imgUrl" mode="widthFix"></image>
				</view>
			</block>
			
			<!-- <block >
				<view class="section-titles title">检查报告<text class="small">(点击查看大图)</text>:</view>
				<view class="desc" style="margin-top: 20upx;">检查时间: 2010</view>
				<view class="section-con" >
					<image class="img" src="https://pet.dqword.com:8021/weappImg/banner_01.png" mode="widthFix"></image>
					<image class="img" src="https://pet.dqword.com:8021/weappImg/banner_01.png" mode="widthFix"></image>
					<image class="img" src="https://pet.dqword.com:8021/weappImg/banner_01.png" mode="widthFix"></image>
				</view>
			</block> -->
		</view>
		
		<view class="empty" v-else>
			<u-empty mode='data' text='您的宠物暂无检查报告'></u-empty>
		</view>
		
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				info: {},
				id: ''
			}
		},

		onLoad(options) {
			this.id = options.id
			this.getItems()
		},

		methods: {
			getItems() {
				api.getPetMedicalRecordList({
					petId: this.id,
					petNewsType: 2
				}, (res) => {
					console.log(res);
					this.info = res
				})
			},
			
			previewImg(index, imgList) {
				let urls = []
				imgList.map(item => {
					urls.push(item.imgUrl)
				})
				uni.previewImage({
					current: index,
					urls
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-wraps {
		background-color: #fff;
	}

	.meet-item {
		background-color: #fff;
		border-radius: 10upx;
		padding: 20upx;
		box-sizing: border-box;
	}

	.meet-status {
		@include flex-base;
		justify-content: space-between;
	}

	.meet-title {
		font-size: $font-size-30;
		font-weight: bold;
	}

	.status {
		font-size: $font-size-28;
	}

	.meet-info {
		margin-top: 20upx;
		@include flex-base;
		justify-content: space-between;

	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.dog {
		font-size: $font-size-26;
		color: $theme-color;
	}

	.desc {
		background-image: url(../static/icon_10.png);
		background-size: 20upx 20upx;
		background-repeat: no-repeat;
		background-position: left center;
		padding-left: 35upx;
	}

	.btns {
		height: 50upx;
		background-color: $theme-color;
		border-radius: 50upx;
		padding: 0 30upx;
		display: flex;
		line-height: 50upx;
		justify-content: center;
		align-content: center;
		color: #fff;
		font-size: 1font-size;
	}

	.section-titles {
		border-top: 1px solid $border-color;
		color: $theme-color;
		padding-top: 30upx;
	}

	.section-con {
		color: #666;
		line-height: 44upx;
		font-size: $font-size-26;
		text-align: justify;
		margin: 30upx 0;
	}

	.img {
		width: 200upx;
		height: 200upx;
		margin-right: 20upx;
	}

	.small {
		font-size: $font-size-24;
	}
</style>
